<template>
	<view>
		<view class="t-c logo">
			<image src="https://study108.oss-rg-china-mainland.aliyuncs.com/tabber/index1.png" mode="widthFix">
			</image>
		</view>
		<view class="t-c f-bold title">学习平台</view>
		<view class="phone flex-between-row">
			账号
			<input v-model="account" class="flex-1 m-l-30" placeholder="请输入账号"></input>
		</view>
		<view class="phone flex-between-row">
			密码
			<input v-model="password" :password="showPassword" maxlength="18" class="flex-1 m-l-30"
				placeholder="请输入密码"></input>
			<u-icon @click="showPassword = !showPassword" :name="showPassword?'eye-off':'eye-fill' " size="24"></u-icon>
		</view>
		<view @click="login" class="login flex-center-column col-f f-44 f-bold">
			点击登录
		</view>
		<view class="protocol">
			点击登录按钮即代表您同意
			<text @click.stop="goLink('/pages/detail/protocol?type=2')" class="col-protocol">《用户协议》</text>与
			<text @click.stop="goLink('/pages/detail/protocol?type=3')" class="col-protocol">《隐私协议》</text>
		</view>
	</view>
</template>

<script>
	import {
		postLogin
	} from '@/api/user.js'
	export default {

		onShow() {
			if (this.$store.getters.userInfo.token) {
				return this.$store.commit('user/logout')
			}
			uni.showToast({
				title: '登录后才可体验更多功能',
				icon: 'none'
			})
		},
		data() {
			return {
				tips: '',
				account: '',
				password: '',
				repassword: '',
				verify_code: '',
				is_logon: false,
				showPassword: true,
				showRepassword: true
			}
		},
		methods: {
			async login() {
				if (this.account.trim('').length == 0 || this.password.trim('').length == 0) {
					return uni.showToast({
						title: '账号密码不能为空',
						icon: 'none'
					})
				}
				const res = await postLogin({
					account: this.account,
					password: this.password
				})
				if (res.code === 200) {
					this.$store.commit('user/setUserInfo', res.data)
					uni.showToast({
						title: '登录成功',
						mask: true,
					})
					setTimeout(() => {
						this.goBack()
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: linear-gradient(-225deg, rgba(254, 214, 227, 0.5) 22.22%, rgba(168, 237, 234, 0.5) 51.08%, rgba(254, 214, 227, 0.5) 78.34%);
		padding-bottom: 30rpx;
	}
</style>

<style lang="scss" scopedssss>
	.logo {
		padding-top: 40rpx;

		image {
			width: 200rpx;
		}
	}

	.title {
		padding-top: 40rpx;
		padding-left: 30rpx;
		font-size: 80rpx;
		letter-spacing: 30rpx;
	}

	.phone {
		margin: 70rpx auto;
		width: 638rpx;
		height: 120rpx;
		border-radius: 14rpx;
		background: rgba(85, 97, 203, 0.3);
		padding: 36rpx 20rpx;
	}

	.login {
		margin: 70rpx auto;
		width: 638rpx;
		height: 120rpx;
		letter-spacing: 10rpx;
		border-radius: 14rpx;
		background: linear-gradient(180deg, rgba(167, 181, 255, 1) 0%, rgba(110, 134, 255, 1) 100%);
	}
</style>
